<!DOCTYPE html>
<html>
<head>
	<title>lineWidth</title>
</head>
<body>
	<canvas id="canvas" width="300" height="200px" style="border: 1px solid #ccc"></canvas>
	<script type="text/javascript">
		
		var c = document.getElementById("canvas");
		var ctx = c.getContext("2d");

		ctx.lineWidth = 10;

		// 基础
		// ctx.lineJoin = "round";

		// ctx.beginPath();
		// ctx.moveTo(0,0);
		// ctx.lineTo(200, 100);
		// ctx.lineTo(300,0);

		// ctx.stroke();


		var ctx = document.getElementById('canvas').getContext('2d');
		var lineJoin = ['round','bevel','miter'];

		ctx.lineWidth = 10;

		for (var i = 0; i < lineJoin.length; i++) {

			ctx.lineJoin = lineJoin[i];
			ctx.beginPath();

			ctx.moveTo(10,5+i*40);
			ctx.lineTo(35,45+i*40);
			ctx.lineTo(75,15+i*40);
			ctx.lineTo(115,45+i*40);
			ctx.lineTo(155,5+i*40);

			ctx.stroke();

		}

		
	</script>
</body>
</html>